<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title></title>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link href="css/style.css" rel="stylesheet"/>
    <style>
    	.container{
    		overflow: hidden;
    	}
    </style>
</head>
<body>
    <div class="container">
        <header class="mui-bar mui-bar-nav layout-bg">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left l-arrow"></a>
            <h1 class="mui-title">个人资料</h1>
        </header>
        <form class="auth-data">
            <div class="mission-list-box de-bottom layout-gap">
                <div class="mission-item personal-edit-box">
                    <div class="mui-flex bor-b">
                        <div class="cell fixed">
                            <span class="auth-text reg-min">头像</span>
                        </div>
                        <label for="avatar-upload" class="cell" id="avatar-box">
                            <img src="images/default-avatar.png" class="default-avatar" width="35" height="35">
                        </label>

                        <input type="file" id="avatar-upload">
                    </div>
                    <div class="mui-flex bor-b">
                        <div class="cell fixed">
                            <span class="auth-text reg-min">姓名</span>
                        </div>
                        <div class="cell">
                            <input class="auth-input" type="password" name="password" value="" placeholder="请输入姓名" />
                        </div>
                    </div>
                    <div class="mui-flex bor-b">
                        <div class="cell fixed">
                            <span class="auth-text reg-min">性别</span>
                        </div>
                        <div class="cell">
                            <div class="gender-box fl">先生</div>
                            <div class="gender-box fl">女士</div>
                        </div>
                    </div>

                    <div class="mui-flex bor-b">
                        <div class="cell fixed">
                            <span class="auth-text reg-min">手机号码</span>
                        </div>
                        <div class="cell">
                            <input class="auth-input" type="number" name="phone" value="" placeholder="请输入手机号码" />
                        </div>
                    </div>

                    <div class="mui-flex bor-b">
                        <div class="cell fixed">
                            <span class="auth-text reg-min">身份证</span>
                        </div>
                        <div class="cell">
                            <input class="auth-input" type="text" name="id_card" value="" placeholder="请输入身份证" />
                        </div>
                    </div>
                </div>

                <div class="personal-title">
                    <span class="fl">服务项目</span>
                    <div class="fr">
                        <span class="red-text" style="font-size: 12px;">注：</span>
                        <span class="per-notes">变更服务行业，需要重新提交资质审核</span>
                    </div>
                </div>

                <div class="mission-item">
                    <div class="add-service">
                        <div class="mui-flex">
                            <div class="cell fixed">
                                <span class="auth-text reg-min">服务项目</span>
                            </div>

                            <div class="cell">
                                <div class="check-services-container">

                                </div>

                                <div class="add-service-icon fl"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="personal-title">身份证照片</div>

                <div class="mission-item">
                    <div class="add-service">
                        <div class="mui-flex">
                            <div class="cell fixed">
                                <span class="auth-text reg-min">身份证</span>
                            </div>

                            <div class="cell">
                                <div class="id-card-box fl">
                                    <div id="card-face-box">
                                        <img src="images/order-none.png" class="id-card-img">
                                    </div>

                                    <p>身份证正面</p>
                                    <label for="card-face" class="red-text">重新上传</label>

                                    <input type="file" id="card-face">
                                </div>
                                <div class="id-card-box fr">
                                    <div id="card-side-box">
                                        <img src="images/personal-bg.png" class="id-card-img">
                                    </div>


                                    <p>身份证背面</p>
                                    <label for="card-side" class="red-text">重新上传</label>

                                    <input type="file" id="card-side">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="personal-title">资质信息</div>

                <div class="mission-item">
                    <div class="add-service">
                        <div class="mui-flex">
                            <div class="cell fixed">
                                <span class="auth-text reg-min">资质照片</span>
                            </div>

                            <div class="cell">
                                <div class="id-card-box fl">
                                    <div id="qual-upload-box">
                                        <img src="images/personal-bg.png" class="qual-upload-img" alt="" width="100%" height="100%">
                                    </div>
                                    <span class="edit-cancel"></span>
                                </div>
                                <label for="qual-upload" class="id-card-box add-qual fr"></label>

                                <input type="file" id="qual-upload">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <div class="pop-container pop-service-box" style="display: none;">
            <div class="pop-item-box">
                <div style="padding: 0 3%;">
                    <div class="pop-service-title">
                        <div class="fl">请选择服务项目</div>
                        <span class="fr pop-close-service"></span>
                    </div>

                    <div class="service-box">
                        <div class="service-list">
                            <div class="service-item a-line">小区商店</div>
                        </div>
                        <div class="service-list">
                            <div class="service-item a-line">搬家</div>
                        </div>
                        <div class="service-list">
                            <div class="service-item a-line">货运</div>
                        </div>
                        <div class="service-list">
                            <div class="service-item a-line">婚车</div>
                        </div>
                        <div class="service-list">
                            <div class="service-item a-line">租车</div>
                        </div>
                        <div class="service-list">
                            <div class="service-item a-line">空调</div>
                        </div>
                        <div class="service-list">
                            <div class="service-item a-line">开锁</div>
                        </div>
                        <div class="service-list">
                            <div class="service-item a-line">保洁</div>
                        </div>
                        <div class="service-list">
                            <div class="service-item a-line">月嫂</div>
                        </div>
                        <div class="service-list">
                            <div class="service-item a-line">保姆</div>
                        </div>
                        <div class="service-list">
                            <div class="service-item a-line">家庭维修</div>
                        </div>
                        <div class="service-list">
                            <div class="service-item a-line">汽车救援</div>
                        </div>
                        <div class="service-list">
                            <div class="service-item a-line">订包厢</div>
                        </div>
                        <div class="service-list">
                            <div class="service-item a-line">数码维修</div>
                        </div>
                        <div class="service-list">
                            <div class="service-item a-line">装修</div>
                        </div>
                        <div class="service-list">
                            <div class="service-item a-line">鲜花蛋糕</div>
                        </div>
                        <div class="service-list">
                            <div class="service-item a-line">上门按摩</div>
                        </div>
                        <div class="service-list">
                            <div class="service-item a-line">教育培训</div>
                        </div>
                        <div class="service-list">
                            <div class="service-item a-line">同城招生</div>
                        </div>
                        <div class="service-list">
                            <div class="service-item a-line">农副产品</div>
                        </div>
                        <div class="service-list">
                            <div class="service-item a-line">礼品定制</div>
                        </div>

                        <div class="clearfix"></div>
                    </div>
                </div>

                <button type="button" class="add-service-btn layout-bg">确认</button>
            </div>
        </div>

        <div class="nav-clear"></div>
        <button type="button" class="pay-btn confirm-edit-btn layout-bg">确认修改</button>
    </div>

    <script>
        $(function() {
            $('.gender-box').on('click', function() {
                var $this = $(this);

                $('.gender-box').removeClass('gender-box-check');
                $this.addClass('gender-box-check');
            });

            // 点击删除服务项目
            $('body').on('click', '.x-icon', function() {
                $(this).parent('.services-item').remove();

                var text = $(this).parent('.services-item').find('.service-text').text();

                removeHeightLine(text);
            });

            function removeHeightLine(text) {
                $('.service-item.service-item-check').each(function() {
                    var $this = $(this);
                    var this_text = $this.text();

                  if (text == this_text)  {
                      $this.removeClass('service-item-check');
                  }
                })
            }

            // 点击显示弹框
            $('.add-service-icon').on('click', function() {
                $('.pop-service-box').fadeIn();
            });

            // 点击列表
            $('.service-list').on('click', function() {
                var $this = $(this);
                $this.find('.service-item').toggleClass('service-item-check');
            });

            $('.pop-close-service').on('click', function() {
                $(this).parents('.pop-service-box').fadeOut();
            });

            //点击确认按钮
            $('.add-service-btn').on('click', CheckServiceList);

            function CheckServiceList() {
                var html = '';
                var this_text = '';

                $('.service-item.service-item-check').each(function() {
                    var $this = $(this);

                    this_text = $this.text();

                    html += '<div class="services-item fl">' +
                        '   <span class="service-text a-line">'+ this_text +'</span>' +
                        '   <i class="x-icon"></i>' +
                        '</div>';
                });

                if (html == '') {
                    mui.toast('请选择服务项目');
                    return;
                }

                $(this).parents('.pop-service-box').fadeOut();
                $('.check-services-container').empty().prepend(html);
            }

            // 上传头像
            $('#avatar-upload').on('change', function () {

                // 上传


                // 预览
                viewImage('avatar-upload', 'avatar-box', 'default-avatar', 'width: 35px;height: 35px;');
            });

            // 上传图片(正面)
            $('#card-face').on('change', function () {

                // 上传


                // 预览
                viewImage('card-face', 'card-face-box', 'id-card-img', '');
            });

            // 背面
            $('#card-side').on('change', function () {

                // 上传


                // 预览
                viewImage('card-side', 'card-side-box', 'id-card-img', '');
            });

            // 资质图片
            $('#qual-upload').on('change', function() {
                viewImage('qual-upload', 'qual-upload-box', 'qual-upload-img', '');
            });

            // 点击删除资质图片
            $('.edit-cancel').on('click', function() {
                $(this).parents('.id-card-box').find('.qual-upload-img').remove();
            });

            // 点击确定
            $('.confirm-edit-btn').on('click', function() {
                var param = $('.auth-data').serializeObject();
            })
        })
    </script>
</body>
</html>